<template>
	<section>
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px;">
		  <el-breadcrumb-item>个人中心</el-breadcrumb-item>
		  <el-breadcrumb-item>修改密码</el-breadcrumb-item>
		</el-breadcrumb>		
		<el-row  :gutter="20">
			<el-col :span="18"  :offset="2" style="margin-top: 50px;">
				<el-form :model="editpassword" status-icon class="demo-ruleForm" :rules="editpasswordrule" ref="editpassword">
				  <el-form-item label="请输入原密码" style="margin-bottom:50px;" prop="password">
				    <el-input v-model="editpassword.password" style="width: 40%;" type="password"></el-input>
				  </el-form-item>
				  <el-form-item label="请输入新密码" style="margin-bottom:50px;" prop="newpassword">
				    <el-input v-model="editpassword.newpassword" style="width: 40%;" type="password"></el-input>
				  </el-form-item>
				  <el-form-item label="请再次输入新密码" style="margin-bottom:50px;" prop="aginpassword">
				    <el-input v-model="editpassword.aginpassword" style="width: 40%;" type="password"></el-input>
				  </el-form-item>
				  <el-form-item >
				    <el-button type="danger" @click.native="addSubmit"  :loading="addLoading">重置密码</el-button>
				  </el-form-item>
				</el-form>	

			</el-col>
		</el-row>
	</section>
</template>
<script>
	import {passwordrule,resetPassword} from '../../api/api';

	//import NProgress from 'nprogress'
	export default {
		data() {
			var rulesname=(rules,value,callback)=>{
				let params={password:this.editpassword.password};
				passwordrule(params).then((r)=>{
					if(!r){
						callback(new Error('原密码不正确'))
					}else{
						callback()
					}
				})					
			}		
			var aginrulesname=(rules,value,callback)=>{
				if(this.editpassword.newpassword!=this.editpassword.aginpassword){
					callback(new Error('两次密码不匹配'))
				}else{
					callback()
				}			
			}				
			return {
				addLoading:false,
				editpassword:{
					password:"",
					newpassword:"",
					aginpassword:"",
				},
				editpasswordrule: {	
					password: [
						{ required: true, message: '请输入原密码', trigger: 'blur' },
						{validator:rulesname,trigger: 'blur'},
					],		
					newpassword: [
						{ required: true, message: '请输入新密码', trigger: 'blur' },
						
					],	
					aginpassword: [
						{ required: true, message: '请再次输入新密码', trigger: 'blur' },
						{validator:aginrulesname,trigger: 'blur'},
					],						
				},					
			}
		},		
		methods: {
			//页面跳转
		    skip(link){
		        this.$router.push(
		        	{
		        		path:link,
		        	}
		        )
		    },						
			addSubmit: function () {	
				var _this=this
				let param={password:_this.editpassword.newpassword};
				this.$refs.editpassword.validate((valid) => {
					if (valid) {
						this.$confirm('确认修改密码吗？', '提示', {}).then(() => {
							this.addLoading = true;
							resetPassword(param).then((r) => {
								if(!r.error){
									this.addLoading = false;
									this.$message({
										message: '重置密码成功',
										type: 'success'
									});
									_this.skip('/login')
								}else{
									this.addLoading = false;
									this.$message({
										message: '重置密码失败',
										type: 'error'
									});										
								}
							})
						});
					}
				});
			},		
		},
		mounted() {
			
		}
	};

</script>
<style >
.drawdislog{
	width: 100%;
	top: 0!important;
}
.eltag{
	cursor: pointer;
}
</style>